<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import baseURL from "@/common/baseUrl.js";
import { mapState } from "vuex"
// import { toast } from "./common/tools";
export default {
  data(){
    return{
      webSocket: null,
      timer: null,
      lockReconnect: false
    }
  },

  created(){
    let token = window.localStorage.getItem("ai_token") || ""
    if(!token) return this.$router.push({name: "index"})
    this.$store.dispatch("getUser")
    this.initwebsocket()
  },

  computed: {
    ...mapState({
      statusRandom: state=> state.statusRandom
    })
  },

  watch: {
    statusRandom(){
      if(this.statusRandom==1) {
        this.initwebsocket()
      }
      if(this.statusRandom==-1){
        if(this.timer) {
          clearInterval(this.timer)
          this.timer = null
        }
        this.webSocket.close()
      } 
    }
  },

  methods: {
    initwebsocket() {
      let token = window.localStorage.getItem("ai_token")
      this.webSocket = new WebSocket(`${baseURL.socketUrl}?token=${token}`);
      this.webSocket.onopen = this.webSocketOnopen  //连接建立成功
      this.webSocket.onmessage = this.webSocketOnMessage  //接受数据 
      this.webSocket.onerror = this.webSocketOnError   //连接建立失败 
      this.webSocket.onclose = this.webSocketOnClose   //连接关闭
    },

    webSocketOnopen(){ 
      console.log("webSocket初始化完成")
        this.timer = setInterval(() => {
          // console.log(this.webSocket.readyState) 
          if(this.webSocket.readyState!=1) {
            clearInterval(this.timer)
            this.timer = null
          }
          this.webSocket.send("PING")
        }, 2000)
    },

    webSocketOnMessage(e){
      const data = JSON.parse(e.data);
      console.log("接收的消息=>", data)
      if(data.status==="loginout") {
        console.log("监控到微信退出登录")
        this.$store.state.loginoutRandom = Math.random()  
      }
      if(data.status==="login") {
        console.log("监控到微信登录")
        this.$store.state.loginRandom = Math.random()
      }  

      if(data.bindWeChatId==this.$store.state.weChatSelectId) {
        console.log("获取当前登录二维码")
        if(this.$store.state.loginCode && this.$store.state.loginCode == "data:image/png;base64," + data.qrcode) return
        this.$store.state.loginCode = "data:image/png;base64," + data.qrcode
      }

      if(data.type===0 && data.lastMessage) {
        console.log("接收到好友消息")
        this.$store.state.msg = data
      }
    },

    webSocketOnError(){
      console.log('监控WebSocket连接发生错误')
      clearInterval(this.timer)
      this.timer = null
      this.initwebsocket()
    },

    webSocketOnClose(){
      console.log("监控webSocket连接关闭"); 
      if(this.statusRandom!=-1) {
        clearInterval(this.timer)
        this.timer = null
        setTimeout(() => {
          this.initwebsocket()
        }, 1000);
      }
    },
  },
}
</script>

<style lang="less">
  @import 'element-ui/lib/theme-chalk/display.css';
  @import "./style/base.less";
  @import "./style/flex.less";
  @import "./style/position.less";
  @import "./style/text.less";

  .confirmButtonClass {
    background-color: #0147fd !important;
    span {
      color: #fff !important;
    }
  }

</style>


